<template>
	<view class="container">
		<!-- 返回按钮 -->
		<!-- <view class="nav" @tap="goBack">
      <image :src="$xyfun.image('/static/arrow-left.png')" class="back-icon"></image>
    </view> -->

		<!-- 温度显示 -->
		<view class="temperature-display">
			<view class="temperature-circle">
				<text class="temperature-value">{{ temperature }}°C</text>
				<!-- <text class="temperature-unit">°C</text> -->
			</view>
		</view>

		<!-- 温度调节 -->
		<view class="temperature-control">
			<view class="temperature-btn left" @click="decreaseTemperature">-</view>
			<text class="temperature-label">温度</text>
			<view class="temperature-btn right" @click="increaseTemperature">+</view>
		</view>

		<!-- 房间选择器 -->
		<view class="room-list">
			<view class="room-selector">
				<!-- 使用 picker 组件来实现下拉选择房间 -->
				<picker v-model="room_id" :range="roomNames" @change="onRoomChange">
					<view class="picker">
						<!-- 显示选择的房间名称 -->
						<text>{{ selectedRoomName }}</text>
						<image class="arrow-down" :src="$xyfun.image('/static/store/arrow.png')"></image>
					</view>
				</picker>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="actions">
			<view class="action-button" v-for="(item, index) in buttons" :key="index" @click="handleButtonClick(index)">
				<image v-if="item.speed" :src="item.state 
            ? $xyfun.image(`/static/icon/${item.name}${item.speed}-on.png`) 
            : $xyfun.image(`/static/icon/${item.name}${item.speed}.png`)" class="action-icon">
				</image>
				<image v-else :src="item.state 
            ? $xyfun.image(`/static/icon/${item.name}-on.png`) 
            : $xyfun.image(`/static/icon/${item.name}.png`)" class="action-icon">
				</image>
				<text class="action-label">{{ item.speed ? item.speed : '' }}{{ item.label }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switch: 'off', // 开关状态 (on / off)
				fan: 1, // 风速
				mode: 'auto', // 当前模式 auto: 自动 cool: 制冷 dry: 除湿 fan: 送风 heat: 制热
				temperature: 16, // 温度
				room_id: 1, // 默认房间 ID
				rooms: [], // 存储房间列表
				roomNames: [], // 存储房间名称列表
				selectedRoomName: '', // 当前选择的房间名称
				machine_id: '', // 存储当前选择房间的 door_device_id
				mac: '', // 空调设备的 mac 地址
				key: '', // 空调设备的 key
				buttons: [{
						name: 'switch',
						label: '开关',
						icon: '/static/icon/switch.png',
						state: false // '关'状态，False为关闭，True为开启
					},
					{
						label: '档风速',
						icon: '/static/icon/fan-speed1.png',
						state: false,
						name: 'fan-speed',
						speed: 1 // 默认风速
					},
					{
						label: '自动',
						icon: '/static/icon/auto.png',
						state: false,
						name: 'auto'
					},
					{
						label: '制冷',
						icon: '/static/icon/cool.png',
						state: false,
						name: 'cool'
					},
					{
						label: '除湿',
						icon: '/static/icon/dry.png',
						state: false,
						name: 'dry'
					},
					{
						label: '送风',
						icon: '/static/icon/fan.png',
						state: false,
						name: 'fan'
					},
					{
						label: '制热',
						icon: '/static/icon/heat.png',
						state: false,
						name: 'heat'
					}
				]
			};
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.loadRoom(); // 加载房间列表
		},
		methods: {
			goBack() {
				uni.navigateBack(); // 返回上一页
			},
			increaseTemperature() {
				if (this.temperature < 30) {
					this.temperature += 0.5; // 最大温度30°C
					if (this.switch === 'on') {
						this.setting();
					}
				}
			},
			decreaseTemperature() {
				if (this.temperature > 16) {
					this.temperature -= 0.5; // 最小温度16°C
					if (this.switch === 'on') {
						this.setting();
					}
				}
			},
			loadRoom() {
				this.$xyfun.userStoreId().then((store_id) => {
					this.$api.post({
						url: '/Venue/Listvenue',
						loadingTip: '加载中...',
						data: {
							store_id: store_id
						},
						success: res => {
							this.rooms = res.rooms; // 更新 rooms 数据
							// 更新 roomNames 和 selectedRoomName
							this.roomNames = this.rooms.map(room => room.name);
							if (this.rooms.length > 0) {
								this.room_id = this.rooms[0].id; // 设置默认选择的房间 ID
								this.selectedRoomName = this.rooms[0].name; // 设置默认房间名称
								this.machine_id = this.rooms[0]
								.door_device_id; // 设置默认房间的 door_device_id 为 machine_id
								this.mac = this.rooms[0].ai_device_id; // 设置默认房间的 ai_device_id 为 mac
								this.key = this.rooms[0].left_ball_id; // 设置默认房间的 left_ball_id 为 key
								console.log("mac:" + this.mac);
								console.log("key:" + this.key);
							}
						},
					});
				});
			},
			onRoomChange(e) {
				const selectedIndex = e.detail.value;
				this.room_id = this.rooms[selectedIndex].id;
				this.selectedRoomName = this.rooms[selectedIndex].name;
				this.machine_id = this.rooms[selectedIndex].door_device_id; // 更新当前选择房间的 door_device_id 为 machine_id
				this.mac = this.rooms[selectedIndex].ai_device_id; // 更新当前选择房间的 ai_device_id 为 mac
				this.key = this.rooms[selectedIndex].left_ball_id; // 更新当前选择房间的 left_ball_id 为 key
				console.log("mac:" + this.mac);
				console.log("key:" + this.key);
				// 切换房间后，重新获取空调的状态
				this.getAirStatus();
			},
			// 获取空调的状态
			getAirStatus() {
				this.$api.get({
					url: '/common/getAirStatus', // 你需要根据实际的 API 路径替换这里
					data: {
						machine_id: this.machine_id // 使用 machine_id 作为参数
					},
					success: res => {
						// 判断空调状态，假设 API 返回的数据结构类似
						console.log("res.switch:" + res.switch); // 打印返回值以供调试
						if (res.switch === 'on') {
							this.switch = true; // 空调开启
						} else if (res.switch === 'off') {
							this.switch = false; // 空调关闭
						} else {
							console.warn('空调状态未知:', res.switch); // 提示异常值
							this.switch = false; // 默认值为关闭
						}
						console.log("switch:" + this.switch); // 打印当前空调状态
					},
					fail: () => {
						uni.showToast({
							title: '请先开启空调',
							icon: 'none'
						});
					}
				});
			},
			setting() {
				const requestData = {
					mac: this.mac, // 空调的 mac 地址
					key: this.key, // 空调的 key
					switch: this.switch, // 当前开关状态
					mode: this.mode, // 当前模式
					T: this.temperature, // 当前温度
					fan: this.fan, // 当前风速
					machine_id: this.machine_id // 当前房间的机器 ID
				};
				// 发送请求
				this.$api.post({
					url: '/common/ctrlAir',
					loadingTip: '加载中...',
					data: requestData,
					success: res => {
						console.log(res);
						uni.showToast({
							title: '设置成功'
						});
					}
				});
			},
			handleButtonClick(index) {
				const button = this.buttons[index];
				if (this.switch === 'off' && button.name !== 'switch') {
					uni.showToast({
						title: '开关已关闭，无法操作',
						icon: 'none'
					});
					return;
				}
				button.state = !button.state;
				if (button.name === 'switch') {
					this.switch = button.state ? 'on' : 'off';
					if (this.switch === 'off') {
						this.buttons.forEach(b => {
							if (b.name !== 'switch') {
								b.state = false;
								b.icon = `/static/icon/${b.name}.png`;
							}
						});
					}
				}
				button.icon = button.state ?
					`/static/icon/${button.name}-on.png` :
					`/static/icon/${button.name}.png`;
				if (button.name !== 'switch' && button.name !== 'fan-speed') {
					this.mode = button.name;
				}
				if (button.name !== 'switch' && button.name !== 'fan-speed') {
					this.buttons.forEach(b => {
						if (b.name !== button.name && b.name !== 'switch' && b.name !== 'fan-speed') {
							b.state = false;
							b.icon = `/static/icon/${b.name}.png`;
						}
					});
				}
				if (button.name === 'fan-speed') {
					this.adjustFanSpeed(button.speed);
				}
				this.setting();
			},
			adjustFanSpeed(speed) {
				this.fan = this.fan === 3 ? 1 : this.fan + 1;
				const fanButton = this.buttons.find(b => b.name === 'fan-speed');
				fanButton.state = true;
				fanButton.speed = this.fan;
				fanButton.icon = `/static/icon/fan-speed${this.fan}.png`;
			},
		}
	};
</script>




<style scoped>
	.picker {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.arrow-down {
		width: 12px;
		height: 8px;
		margin-left: 10px;
	}

	/* 操作按钮 */
	.actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 40px;
	}

	.action-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px;
	}

	.action-icon {
		width: 30px;
		height: 30px;
	}

	.action-label {
		margin-top: 5px;
		font-size: 14px;
	}

	/* 全局容器 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100vh;
		background-color: #000;
		color: #fff;
	}

	/* 返回按钮 */
	.nav {
		position: absolute;
		top: 20px;
		left: 20px;
	}

	.back-icon {
		width: 25px;
		height: 25px;
	}

	/* 温度显示 */
	.temperature-display {
		margin-top: 50px;
	}

	.temperature-circle {
		width: 378rpx;
		height: 378rpx;
		background-color: #A3DD77;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.temperature-value {
		font-size: 48px;
		color: #fff;
		font-weight: bold;
	}

	.temperature-unit {
		font-size: 20px;
		color: #fff;
		position: absolute;
		top: 70px;
		right: 45px;
	}

	/* 温度调节 */
	.temperature-control {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		background-color: #A3DD77;
		border-radius: 42rpx;
	}

	.temperature-btn {
		width: 50px;
		height: 50px;
		color: #fff;
		border: none;
		font-size: 24px;
		margin-left: 59rpx;
		margin-right: 59rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.temperature-btn.left {
		margin-left: 0;
	}

	.temperature-btn.right {
		margin-right: 0;
	}

	.temperature-label {
		color: #fff;
		font-size: 18px;
	}

	/* 操作按钮 */
	.actions {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		width: 90%;
		margin-top: 10px;
	}

	.action-button {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.action-icon {
		width: 50px;
		height: 50px;
		margin-bottom: 10px;
	}

	.action-label {
		color: #fff;
		font-size: 14px;
	}
</style>